<template>
  <div class="page">
    <h1>Tabs 标签页</h1>
    <p>选项卡切换组件，常用于平级区域大块内容的的收纳和展现。</p>
    <p>标准用法：</p>
    <Tabs type="card" @on-close="closePane" @on-click="clickPane" :closeCallBack="closeTabs">
      <tab-pane v-for="(tab, i) in tabList" :key="i"
        :label="tab.label"
        :name="tab.name"
        :closed="tab.closed">
        <span>{{tab.content}}</span>
      </tab-pane>
    </Tabs>
    <p>
      <Button type="primary" @click="addPane">增加</Button>
    </p>
    <p>通过设置 <code>Tabs</code> 组件的 <code>type</code> 属性为 <code>card</code> 更改为卡片样式。</p>
    <p>通过设置属性 <code>closed</code> 可以关闭某一项，仅在 <code>type</code> 为 <code>card</code> 时有效。</p>
    <p>设置属性 <code>size</code> 为 <code>small</code> 可以显示为迷你型。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tabs type=&quot;card&quot; @on-close=&quot;closePane&quot; @on-click=&quot;clickPane&quot;&gt;
          &lt;tab-pane v-for=&quot;(tab, i) in tabList&quot; :key=&quot;i&quot;
            :label=&quot;tab.label&quot;
            :name=&quot;tab.name&quot;
            :closed=&quot;tab.closed&quot;&gt;
            &lt;span&gt;内容&lt;/span&gt;
          &lt;/tab-pane&gt;
        &lt;/Tabs&gt;
        &lt;Button type=&quot;primary&quot; @click=&quot;addPane&quot;&gt;增加&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              defauleTab: 'tab2',
              tabList: [
                {
                  label: '标签页一',
                  name: 'tab1',
                  content: '我是标签页一',
                  closed: false
                },
                {
                  label: '标签页二',
                  name: 'tab2',
                  content: '我是标签页二',
                  closed: true
                },
                {
                  label: '标签页三',
                  name: 'tab3',
                  content: '我是标签页三',
                  closed: true
                }
              ],
              num: 3
            }
          },
          methods: {
            addPane () {
              this.num++
              this.tabList.push({
                label: `标签页-内部${this.num}`,
                name: `新增${this.num}`,
                content: '我是新增tab',
                closed: true
              })
            },
            clickPane (name) {
              // console.log('clickPane', name)
            },
            closePane (name) {
              this.tabList = this.tabList.filter(tab => {
                return tab.name !== name
              })
              // console.log('closePane', name)
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Tabs props</p>
    <Table :columns="column" :data="dataList"></Table>
    <p>tabs events</p>
    <Table :columns="column1" :data="dataList1"></Table>
    <p>tabPane props</p>
    <Table :columns="column" :data="dataList2"></Table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      column: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          width: 400,
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      dataList: [
        {
          attribute: 'type',
          explain: '页签的基本样式，可选值为 line 和 card',
          type: 'String',
          default: 'line'
        },
        {
          attribute: 'size',
          explain: '尺寸，可选值为 default 和 small',
          type: 'String',
          default: 'default'
        },
        {
          attribute: 'closed',
          explain: '是否可以关闭页签，仅在 type="card" 时有效',
          type: 'Boolean',
          default: 'false'
        }
      ],
      column1: [
        {
          title: '事件名',
          key: 'enevt'
        },
        {
          title: '说明',
          key: 'type'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      dataList1: [
        {
          enevt: 'on-close',
          type: 'tab 关闭时触发',
          callback: 'key'
        },
        {
          enevt: 'on-click',
          type: 'tab 点击时触发',
          callback: 'key'
        }
      ],
      dataList2: [
        {
          attribute: 'label',
          explain: '选项卡头显示文字',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用该选项卡',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'closable',
          explain: '是否可以关闭页签，仅在 type="card" 时有效',
          type: 'Boolean',
          default: 'null'
        }
      ],
      defauleTab: 'tab2',
      tabList: [
        {
          label: '标签页一',
          name: 'tab1',
          content: '我是标签页一',
          closed: false
        },
        {
          label: '标签页二',
          name: 'tab2',
          content: '我是标签页二',
          closed: true
        },
        {
          label: '标签页三',
          name: 'tab3',
          content: '我是标签页三',
          closed: true
        }
      ],
      num: 3
    }
  },
  watch: {
    defauleTab (val) {
      console.log('defauleTab', val)
    }
  },
  methods: {
    addPane () {
      this.num++
      this.tabList.push({
        label: `标签页-内部${this.num}`,
        name: `新增${this.num}`,
        content: '我是新增tab',
        closed: true
      })
    },
    clickPane (name) {
      // console.log('clickPane', name)
    },
    closePane (name) {
      this.tabList = this.tabList.filter(tab => {
        return tab.name !== name
      })
      console.log('closePane', name)
    },
    closeTabs (name) {
      console.log('closeTabs', name)
      return true
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 10px 0;
}
span{
  display: block;
  padding: 20px;
}
</style>
